<template>
  <el-row style="width: 100%" :gutter="20">
    <el-col :span="8">
      <el-card style="background-color:#3f72f0;color: white;">最大借阅书本数：<em>{{ role.limitBook }}</em>
      </el-card>
    </el-col>
    <el-col :span="8">
      <el-card style="background-color:#e1587f;color: white;">最大借阅天数： <em>{{ role.limitDay }}</em>
      </el-card>
    </el-col>
    <el-col :span="8">
      <el-card style="background-color:#a220cc;color: white;">当前借阅书本数：<em>{{ MyBorrow.length }}</em>
      </el-card>
    </el-col>
  </el-row>

  <el-divider content-position="left"></el-divider>

  <el-row style="width: 100%" :gutter="20">
    <el-col :span="12">
      <el-card>
        <template #header>
          <div class="card-header">
            <el-icon>
              <UserFilled/>
            </el-icon>
            <span> 基本信息</span>
            <el-button style="margin-left: 15px;" bg class="button" @click="MineVisible = true" text>修改信息</el-button>
            <el-button bg class="button" @click="PassVisible = true" text>修改密码</el-button>
          </div>
        </template>
        <!--   描述列表     -->
        <el-descriptions
            :column="3"
            border
        >
          <el-descriptions-item label="账号">{{ user.acc }}</el-descriptions-item>
          <el-descriptions-item label="名称">{{ user.name }}</el-descriptions-item>
          <el-descriptions-item label="角色">{{ role.name }}</el-descriptions-item>
          <el-descriptions-item label="性别">{{ user.sex }}</el-descriptions-item>
          <el-descriptions-item label="生日">{{ user.birth }}</el-descriptions-item>
          <el-descriptions-item label="最大借阅书本">{{ role.limitBook }}</el-descriptions-item>
          <el-descriptions-item label="最大借阅天数">{{ role.limitDay }}</el-descriptions-item>
          <el-descriptions-item label="用户备注">{{ user.remark }}</el-descriptions-item>
        </el-descriptions>
      </el-card>
      <!--   我的借阅   -->
      <card-borrow/>
    </el-col>
    <el-col :span="12">
      <el-card style="min-height: calc(73.5vh)">
        <template #header>
          <div class="card-header">
            <el-icon>
              <Promotion/>
            </el-icon>
            <span> 近期活动</span>
          </div>
        </template>
        <el-table :data="tableData" border :header-cell-style="{'background-color': '#f6f6f6'}" style="width: 100%;max-height: 70vh;overflow: scroll;">
          <el-table-column prop="type" label="借还" align="center">
            <template #default="scope">
              <el-tag :type="scope.row.type === 0 ? 'primary' : 'success'" disable-transitions>
                {{ scope.row.type === 0 ? '借阅' : '归还' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="booknoName" label="书本名称" width="200" align="center"/>
          <el-table-column prop="createTime" label="时间" width="200" align="center"/>
          <el-table-column prop="type" label="操作" align="center">
            <template #default="scope">
              <el-button link size="small" type="primary" @click="showDetail(scope.$index, scope.row)">
                详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row justify="end" style="margin-top: 20px">
          <el-pagination v-model:current-page="currentPage" background layout="total, prev, pager, next"
                         :total="borrowList.length" @current-change="onChangeSize"/>
        </el-row>
      </el-card>
    </el-col>
  </el-row>
  <!--   修改我的信息   -->
  <dialog-mine v-model:visible="MineVisible"/>
  <!--   修改密码   -->
  <dialog-pass v-model:visible="PassVisible"/>
  <!--   借阅详情   -->
  <common-detail v-model:visible="DetailVisible" v-model:form="DetailForm" :close-visible="closeVisible"
                 :on-detail="onDetail" v-model:type="DetailType"/>
</template>

<script setup lang="ts">
import {Promotion, UserFilled} from '@element-plus/icons-vue'
import {onMounted, ref} from "vue";
import api from "@/api";
import {FormInstance} from "element-plus";
import DialogPass from "@/components/dialog/DialogPass.vue";
import DialogMine from "@/components/dialog/DialogMine.vue";
import CommonDetail from "@/components/common/CommonDetail.vue";
import CardBorrow from "@/components/card/CardBorrow.vue";

const MineVisible = ref(false);
const PassVisible = ref(false);
const user = ref({});
const role = ref({});
const menu = ref([]);
const borrowList = ref([]);
const MyBorrow = ref([]);
const tableData = ref([]);
onMounted(() => {
  user.value = JSON.parse(localStorage.getItem("user"));
  role.value = JSON.parse(localStorage.getItem("role"));
  menu.value = JSON.parse(localStorage.getItem("menu"));
  api.borrow.findBorrowUser().then((res: any) => {
    borrowList.value = res.data;
    if (borrowList.value.length > 10 && res.data !== null){
      tableData.value = borrowList.value.slice(0, 10);
    }
  })
  api.bookno.findBooknoBorrow().then((res: any) => {
    MyBorrow.value = res.data;
  })
})

const currentPage = ref(1);

function onChangeSize(val) {
  tableData.value = borrowList.value.slice((val - 1) * 10, val * 10);
}

//详情
const DetailVisible = ref(false);
const DetailForm = ref({});
const DetailType = [
  // {label: '编号', width: '', rules: [{required: false, message: '请输入编号', trigger: 'blur'}], showType: '', prop: 'id'}
  {label: '流水编号', width: '', rules: [{required: false, message: '请输入流水编号', trigger: 'blur'}], showType: '', prop: 'serial'}
  , {label: '书本条码', width: '', rules: [{required: true, message: '请输入书本条码', trigger: 'blur'}], showType: '', prop: 'booknoCode'}
  , {label: '书本名称', width: '', rules: [{required: false, message: '请输入书本名称', trigger: 'blur'}], showType: '', prop: 'booknoName'}
  // , {label: '用户编号', width: '', rules: [{required: false, message: '请输入用户编号', trigger: 'blur'}], showType: '', prop: 'userId'}
  , {label: '借阅用户', width: '', rules: [{required: false, message: '请输入用户', trigger: 'blur'}], showType: '', prop: 'userName'}
  , {label: '借阅类别', width: '', rules: [{required: false, message: '请输入借阅类别', trigger: 'blur'}], showType: 'borrowType', prop: 'type'}
  // , {label: '创建者', width: '', rules: [{required: false, message: '请输入创建者', trigger: 'blur'}], showType: '', prop: 'createBy'}
  // , {label: '创建时间', width: '', rules: [{required: false, message: '请输入创建时间', trigger: 'blur'}], showType: '', prop: 'createTime'}
  // , {label: '更新者', width: '', rules: [{required: false, message: '请输入更新者', trigger: 'blur'}], showType: '', prop: 'updateBy'}
  // , {label: '更新时间', width: '', rules: [{required: false, message: '请输入更新时间', trigger: 'blur'}], showType: '', prop: 'updateTime'}
  , {label: '状态', width: '', rules: [{required: false, message: '请输入状态', trigger: 'blur'}], showType: 'state', prop: 'unlucky'}
  , {label: '备注', width: '', rules: [{required: false, message: '请输入备注', trigger: 'blur'}], showType: 'text', prop: 'remark'}
];

function showDetail(index: number, row: any) {
  DetailVisible.value = true;
  DetailForm.value = row;
}

function closeVisible(formEl: FormInstance | undefined) {
  DetailVisible.value = false;
}

function onDetail() {
  DetailVisible.value = false;
}
</script>

<style scoped>
em{
  font-weight: bold;
  font-size: 30px;
}
</style>